<script setup lang="ts">
import { ref } from "vue";
import router from "@/router";
import { useSystemStoreWithOut } from "@/store/modules/system";
import { storeToRefs } from "pinia";
import { allocationTypeList } from "@/utils/staticData";

const systemStore = useSystemStoreWithOut();
const { warehouseList } = storeToRefs(systemStore);

const emits = defineEmits(["handleSearch"]);
let searchForm = ref({
  allocationType: "",
  originWarehouseCode: "",
  targetWarehouseCode: "",
  allocationCode: "",
  beginDate: "",
  endDate: ""
});
const dateArea = ref([]);

// 日期更改
const dateChange = (value: []) => {
  if (!value) {
    searchForm.value.beginDate = "";
    searchForm.value.endDate = "";
  } else {
    searchForm.value.beginDate = dateArea.value[0];
    searchForm.value.endDate = dateArea.value[1];
  }
};

let handleReset = () => {
  searchForm.value = {
    allocationType: "",
    originWarehouseCode: "",
    targetWarehouseCode: "",
    allocationCode: "",
    beginDate: "",
    endDate: ""
  };
  dateArea.value = [];
  emits("handleSearch");
};

let addNewCostomer = () => {
  router.push({
    name: "inventoryTransferAddDetail"
  });
};

defineExpose({
  getForm: () => searchForm.value
});
</script>

<template>
  <header class="header flex-row w-full wrapper-form">
    <div class="header_left flex-1">
      <el-form class="form" :model="searchForm" inline>
        <div class="inline-flex mb-[16px]">
          <el-form-item label="调拨类型" prop="allocationType">
            <el-select
              v-model="searchForm.allocationType"
              filterable
              placeholder="请输入"
              clearable
            >
              <el-option
                v-for="item in allocationTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="调入仓库" prop="originWarehouseCode">
            <el-select
              v-model="searchForm.originWarehouseCode"
              filterable
              placeholder="请输入"
              clearable
            >
              <el-option
                v-for="item in warehouseList"
                :key="item.warehouseCode"
                :value="item.warehouseCode"
                :label="item.warehouseName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="调出仓库" prop="targetWarehouseCode">
            <el-select
              v-model="searchForm.targetWarehouseCode"
              filterable
              placeholder="请输入"
              clearable
            >
              <el-option
                v-for="item in warehouseList"
                :key="item.warehouseCode"
                :value="item.warehouseCode"
                :label="item.warehouseName"
              />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="调拨日期">
          <el-date-picker
            v-model="dateArea"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
            @change="dateChange"
          />
        </el-form-item>
        <div class="inline-flex mb-[16px]">
          <el-form-item label="调拨单号" prop="allocationCode">
            <el-input
              v-model="searchForm.allocationCode"
              placeholder="请输入"
            />
          </el-form-item>
          <el-button type="primary" @click="emits('handleSearch')"
            >查询</el-button
          >
          <el-button @click="handleReset">重置</el-button>
        </div>
      </el-form>
    </div>
    <div class="header_right">
      <el-button @click.prevent.stop="addNewCostomer">
        <span>+ </span>&nbsp;新增
      </el-button>
    </div>
  </header>
</template>

<style scoped lang="scss">
.header {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;

  .header_left {
    display: flex;
    align-items: center;
    height: 100%;

    .form {
      width: 100%;
      :deep(.el-form-item) {
        margin-bottom: 0;
      }
    }
  }

  .header_right {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;

    :deep(.el-button + .el-button) {
      margin-left: 0;
    }
  }
}
</style>
